<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>banner管理</title>
    <c:set var="contextPath" value="${pageContext.request.contextPath}" scope="request"/>
	<link rel="stylesheet" href="${contextPath}/static-resources/css/index.css"/>
	<script src="${contextPath}/static-resources/jquery-1.12.1.js"></script>
	<script src="${contextPath}/static-resources/js/index.js"></script>
	
	<link rel="stylesheet" type="text/css" href="${contextPath}/static-resources/themes/material/easyui.css">
	<link rel="stylesheet" type="text/css" href="${contextPath}/static-resources/themes/icon.css">
	<script type="text/javascript" src="${contextPath}/static-resources/jquery.min.js"></script>
	<script type="text/javascript" src="${contextPath}/static-resources/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#bannerTable').datagrid({
				onDblClickRow: function(index, row){
					$('#img').prop('src', row.imgUrl);
					$('#showImgWin').window('open');
				}
			});
			$('#type').combobox({
				onSelect: function(record, oldValue){
					switch(record.value){
						case '1':
							$('#contentUrlDiv').hide();
							$('#exhibitionDiv').show();
							break;
						case '3':
							$('#contentUrlDiv').show();
							$('#exhibitionDiv').hide();
							break;
					}
				}
			});
		})
		
		function openBannerWin(data){
			$('#bannerWin').window('open');
			$('#exhibition').combobox('reload');
			if(data){
				switch (data.type) {
					case 1:
						$('#exhibition').combobox('setValue', data.contentUrl);
						break;
					case 3:
						$('#contentUrl').textbox('setValue', data.contentUrl);
						break;
				}
				$('#bannerWin').window('setTitle', '修改banner');
				$('#id').val(data.id);
				$('#name').textbox('setValue', data.name);
				$('#image').filebox('setText', data.imgUrl);
				var fileInputId = '#' + $('#image').next().find('input[type="file"]').attr("id");
				$(fileInputId).val(null);
				$('#type').combobox('setValue', data.type);
				$('#zindex').numberspinner('setValue', data.zindex);
			}else{
				$('#bannerWin').window('setTitle', '添加banner');
				$('#id').val('');
				$('#name').textbox('setValue', '');
				$('#image').filebox('setText', '');
				var fileInputId = '#' + $('#image').next().find('input[type="file"]').attr("id");
				$(fileInputId).val(null);
				$('#type').combobox('setValue', '1');
				$('#contentUrl').textbox('setValue', '');
				$('#zindex').numberspinner('setValue', '');
			}
		}
		
		function removeBanner(){
			var row = $('#bannerTable').datagrid('getSelected');
			if (!row) {
				showWarn('请选择要删除的数据');
				return;
			}
			confirm('确定删除选择数据?', function(){
				openMask();
				$.ajax({
					type : "POST",
					url : '${contextPath}/banner/delete.do',
					data : {"id" : row.id},
					success : function(data) {
						if (data.status) {
							closeMask();
							$('#bannerTable').datagrid('reload');
						} else {
							showError(data.message);
						}
						closeMask();
					},
					error : function() {
						showError('系统异常');
						closeMask();
					}
				});				
			}, function(){
				return;
			})
		}
		
		function openUpdateBannerWin(){
			var row = $('#bannerTable').datagrid('getSelected');
			if (!row) {
				showWarn('请选择要修改的数据');
				return;
			}
			
			openMask();
			$.ajax({
				type : "POST",
				url : '${contextPath}/banner/findOne.do',
				data : {"id" : row.id},
				success : function(data) {
					if (data.status) {
						closeMask();
						openBannerWin(data.data);
					} else {
						showError(data.message);
					}
					closeMask();
				},
				error : function() {
					showError('系统异常');
					closeMask();
				}
			});
		}

		function saveBanner(dataObj) {
			openMask();
			$.ajax({
				type : "POST",
				url : '${contextPath}/banner/save.do',
				enctype : 'multipart/form-data',
				data : dataObj,
				success : function(data) {
					if (data.status) {
						$('#bannerWin').window('close');
						$('#bannerTable').datagrid('reload');
					} else {
						showError(data.message);
					}
					closeMask();
				},
				error : function() {
					showError('系统异常');
					closeMask();
				}
			});
		};

		function addBanner() {
			var id = $('#id').val();
			var name = $('#name').textbox('getValue');
			var typeId = $('#type').combobox('getValue');
			var fileInputId = $('#image').next().find('input[type="file"]')
					.attr("id");
			var file = document.getElementById(fileInputId).files[0];

			switch (typeId) {
			case '1':
				var contentUrl = $('#exhibition').combobox('getValue');
				break;
			case '3':
				var contentUrl = $('#contentUrl').textbox('getValue');
				break;
			}
			var zindex = $('#zindex').numberspinner('getValue');

			if (!fileInputId) {
				showInfo("logo不能为空");
				return;
			}
			if (typeId == '1' && !contentUrl) {
				showInfo("跳转展览不能为空");
				return;
			}

			var dataObj = new Object();
			dataObj.id = id;
			dataObj.name = name;
			dataObj.typeId = typeId;
			dataObj.contentUrl = contentUrl;
			dataObj.zindex = zindex;
			if (file) {
				var reader = new FileReader();
				reader.onload = function(e) {
					var base64stream = this.result;
					dataObj.fileName = file.name;
					dataObj.base64stream = base64stream;
					saveBanner(dataObj);
				};
				reader.readAsDataURL(file);
			} else {
				saveBanner(dataObj);
			}
		}
	</script>
</head>
<body style="height: 100%;">
	<div class="find_nav">
	    <div class="find_nav_left">
	        <div class="find_nav_list">
	            <ul>
	                <li><a href="javascript:void(0)" url="${contextPath}/exhibition/index.do">展览</a></li>
	                <li><a href="javascript:void(0)" url="${contextPath}/exhibitionHome/index.do">展厅</a></li>
	                <li><a href="javascript:void(0)" url="${contextPath}/production/index.do">作品</a></li>
	                <li><a href="javascript:void(0)" url="${contextPath}/image/index.do">图片</a></li>
	                <li><a href="javascript:void(0)" url="${contextPath}/user/index.do">用户</a></li>
	                <li class="selected"><a href="javascript:void(0)" url="${contextPath}/banner/index.do">banner</a></li>
	                <li class="sideline"></li>
	            </ul>
	        </div>
	    </div>
	</div>
	<div id="content" style="width: 100%; position: absolute;top: 45px;">
		<table id="bannerTable" class="easyui-datagrid" title="banner" style="width:100%;height:100%;"
			data-options="rownumbers:true, singleSelect:true, url:'${contextPath}/banner/listJson.do', method:'get',
			toolbar:'#bannerTableTB' " >
			<thead>
				<tr>
					<th data-options="field:'ck', checkbox:true"></th>
					<th data-options="field:'name', width:'20%'" >名称</th>
					<th data-options="field:'typeName', width:'10%'">类型</th>
					<th data-options="field:'contentUrl', width:'25%'">内容链接</th>
					<th data-options="field:'imgUrl', width:'25%'">图片链接</th>
					<th data-options="field:'zindex', width:'10%'">序号</th>
				</tr>
			</thead>
		</table>
		
		<div id="bannerTableTB">
			<a href="#" class="easyui-linkbutton" iconCls="icon-sum" plain="true" onclick="$('#bannerTable').datagrid('reload')">查询所有</a>
         	<span class="datagrid-btn-separator" style="vertical-align: middle;display:inline-block;float:none"></span>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="openBannerWin()">添加</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="openUpdateBannerWin()">编辑</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeBanner()">删除</a>
		</div>
		
		<!-- ##############下面是添加作品图片相关的窗体############## -->
		<div id="bannerWin" class="easyui-window" title="添加作品图片" data-options="iconCls:'icon-add', collapsible:'false', modal:'true', closed:true, footer:'#bannerWinFooter'" style="width:450px; height:350px; padding:10px;" >
			<div style="margin-bottom:5px">
				<input id="id" name="id" hidden="hidden"/>
				<input class="easyui-textbox" id="name" data-options="label: '名称：', labelPosition:'before'" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<select class="easyui-combobox" id="type" data-options="label: '类型：', labelPosition:'before'" style="width: 100%;">
					<option value="1">展览</option>
					<option value="3">网页</option>
				</select>
			</div>
			<div style="margin-bottom: 5px;">
				<input class="easyui-filebox" id="image" style="width:100%;" data-options="label:'banner图片：', labelPosition:'before', buttonText:'请选择...' ">
			</div>
			<div style="margin-bottom:5px" id= "contentUrlDiv">
				<input class="easyui-textbox" id="contentUrl" data-options="label: '内容链接：', labelPosition:'before' " style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px" id= "exhibitionDiv">
				<input class="easyui-combobox" id="exhibition"  data-options="label: '跳转展览：', labelPosition:'before', url:'${contextPath}/exhibition/listJson.do',method:'get', valueField:'id', textField:'name'" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-numberspinner" id="zindex" data-options="label: '排序号：', labelPosition:'before', min:0, max:999" style="width: 100%;"/>
			</div>
		</div>
		
		<div id="bannerWinFooter" class="windowFooter">
			<a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="addBanner()">确定</a>  
            <a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="$('#bannerWin').window('close')">取消</a>  
		</div>
		
		<!-- ##############显示图片的窗口############## -->
		<div id="showImgWin" class="easyui-window" title="图片预览" data-options="iconCls:'icon-add', collapsible:'false', modal:'true', closed:true, footer:'#showImgWinFooter'" style="width:500px; height:500px; padding:10px;" >
			<div style="width: 100%; height: 100%;">
				<img id="img" alt="" src="" />
			</div>
		</div>
		<div id="showImgWinFooter" class="windowFooter">
            <a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="$('#showImgWin').window('close')">取消</a>  
		</div>
		
	</div>
</body>


</html>